<template>
  <view class="craftsman-list">
    <view
      class="craftsman-item"
      v-for="(item, index) in list"
      :key="index"
      @click="itemClick(item)"
    >
      <view class="avatar">
        <image src="@/static/image/common/test.png" mode="aspectFill" />
        <view class="sub">金牌</view>
      </view>

      <view class="content flex-1">
        <view class="name text-line"> 王悦颜 </view>
        <view class="tips text-line">上门按摩丨半年999+丨2.1km丨免出行费</view>
        <view class="score"> 7.9分 </view>
        <view class="options flex flex-middle flex-between">
          <view class="options-item flex flex-middle">
            <u-icon name="chat" size="20" color="#31BC4E" />
            32
          </view>
          <view class="options-item flex flex-middle">
            <u-icon name="thumb-up" size="20" color="#31BC4E" />
            1311万
          </view>
          <view class="options-item flex flex-middle">
            <u-icon name="man-add" size="20" color="#31BC4E" />
            51
          </view>
        </view>

        <reservation class="btn" :select="select" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    select: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    itemClick(item) {
      this.select ? this.selectCraftsman(item) : this.toDetail(item);
    },
    selectCraftsman(item) {
      console.log(item);
      this.$navigateBack();
    },
    toDetail(item) {
      this.$navigateTo(`/pages/craftsman/detail?id=${item}`);
    },
  },
};
</script>

<style scoped lang="scss">
.craftsman-item {
  padding: 12px 0;
  border-bottom: 1px solid #ecedec;
  overflow: hidden;

  .content {
    height: 88px;
    position: relative;

    .btn {
      position: absolute;
      right: 0;
      bottom: 0;
    }

    .options {
      width: 180px;
      color: #222;
      font-size: 11px;
      margin-top: 8px;

      &-item {
        width: 33.33%;
      }
    }

    .score {
      color: #fa6400;
      margin-top: 6px;
      font-size: 13px;
    }

    .tips {
      font-size: 11px;
      color: #9d9d9d;
      margin-top: 6px;
      height: 11px;
      line-height: 11px;
    }

    .name {
      color: #222222;
      height: 20px;
      line-height: 20px;
    }
  }

  .avatar {
    position: relative;
    float: left;
    padding-right: 8px;

    .sub {
      position: absolute;
      top: 0;
      left: 0;
      padding: 0 5px;
      font-size: 10px;
      color: #ca923f;
      background: #fdf5dc;
      border-radius: 8px 0px 8px 8px;
      border: 1px solid #ca923f;
    }

    image {
      width: 88px;
      height: 88px;
      border-radius: 8px;
    }
  }
}
</style>